import { useBlogStore } from '../store';
import { useShallow } from 'zustand/react/shallow';
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from '../components/ui/card';
import { Button } from '../components/ui/button';
import { motion } from 'framer-motion';

export default function AboutPage() {
  // 使用zustand状态管理
  const { userProfile, skills, workExperience } = useBlogStore(
    useShallow((state) => ({
      userProfile: state.userProfile,
      skills: state.skills,
      workExperience: state.workExperience,
    })),
  );
  return (
    <div className="space-y-12">
      {/* 个人信息卡片 */}
      <motion.div
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.5 }}
      >
        <Card className="overflow-hidden border-none shadow-lg">
          <div className="absolute inset-0 bg-gradient-to-r from-blue-500 to-purple-600 h-32"></div>
          <div className="relative pt-16 px-6 pb-6 flex flex-col md:flex-row items-center md:items-start gap-6">
            <div className="h-24 w-24 rounded-full bg-white p-1 shadow-xl">
              <div className="h-full w-full rounded-full bg-blue-500 flex items-center justify-center text-white text-3xl font-bold">
                {userProfile.name.charAt(0)}
              </div>
            </div>
            <div className="flex-1 text-center md:text-left mt-4 md:mt-0">
              <h2 className="text-2xl font-bold mb-1">{userProfile.name}</h2>
              <div className="text-gray-500 dark:text-gray-400 mb-4">{userProfile.title}</div>

              <p className="mb-4 text-gray-600 dark:text-gray-300">{userProfile.bio}</p>

              <div className="flex flex-wrap gap-4 justify-center md:justify-start">
                <a
                  href={`mailto:${userProfile.email}`}
                  className="text-gray-600 dark:text-gray-300 hover:text-blue-500 flex items-center gap-1"
                >
                  <span className="material-icons">email</span> {userProfile.email}
                </a>
                <a
                  href={userProfile.github}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="text-gray-600 dark:text-gray-300 hover:text-blue-500 flex items-center gap-1"
                >
                  <span className="material-icons">code</span> GitHub
                </a>
                <a
                  href={userProfile.linkedin}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="text-gray-600 dark:text-gray-300 hover:text-blue-500 flex items-center gap-1"
                >
                  <span className="material-icons">business</span> LinkedIn
                </a>
                <a
                  href={userProfile.twitter}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="text-gray-600 dark:text-gray-300 hover:text-blue-500 flex items-center gap-1"
                >
                  <span className="material-icons">chat</span> Twitter
                </a>
              </div>
            </div>
          </div>
        </Card>
      </motion.div>

      {/* 技能部分 */}
      <motion.div
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.5, delay: 0.2 }}
      >
        <h3 className="text-2xl font-bold mb-6">技能</h3>
        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
          {skills.map((skill, index) => (
            <motion.div
              key={index}
              initial={{ opacity: 0, scale: 0.9 }}
              animate={{ opacity: 1, scale: 1 }}
              transition={{ duration: 0.3, delay: index * 0.05 }}
            >
              <Card className="h-full border-none shadow hover:shadow-md transition-shadow">
                <CardContent>
                  <div className="mb-2 flex justify-between items-center">
                    <div className="font-medium">{skill.name}</div>
                    <div className="text-gray-500 dark:text-gray-400">{skill.level}%</div>
                  </div>
                  <div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5">
                    <div
                      className="bg-blue-600 h-2.5 rounded-full"
                      style={{ width: `${skill.level}%` }}
                    ></div>
                  </div>
                </CardContent>
              </Card>
            </motion.div>
          ))}
        </div>
      </motion.div>

      {/* 工作经历 */}
      <motion.div
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.5, delay: 0.4 }}
      >
        <h3 className="text-2xl font-bold mb-6">工作经历</h3>
        <div className="space-y-6">
          {workExperience.map((job, index) => (
            <motion.div
              key={index}
              initial={{ opacity: 0, x: -20 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ duration: 0.3, delay: index * 0.1 }}
            >
              <Card className="border-l-4 border-l-blue-500 shadow hover:shadow-md transition-shadow">
                <CardHeader>
                  <div className="flex flex-col md:flex-row md:justify-between md:items-center gap-2">
                    <CardTitle>{job.position}</CardTitle>
                    <CardDescription className="md:text-right">{job.period}</CardDescription>
                  </div>
                  <div className="text-blue-600 dark:text-blue-400 font-medium">{job.company}</div>
                </CardHeader>

                <CardContent>
                  <p className="text-gray-600 dark:text-gray-300">{job.description}</p>
                </CardContent>

                <CardFooter>
                  <div className="flex flex-wrap gap-2">
                    {job.technologies.map((tech) => (
                      <span
                        key={tech}
                        className="px-2 py-1 text-xs rounded-full bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-100"
                      >
                        {tech}
                      </span>
                    ))}
                  </div>
                </CardFooter>
              </Card>
            </motion.div>
          ))}
        </div>
      </motion.div>
    </div>
  );
}
